<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="renderer" content="webkit" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title>客户服务-已回答</title>
  <link rel="stylesheet" type="text/css" href="../../lib/layui/css/layui.css" />
  <style>
    /* --- common --- */
    .layui-input:focus, .layui-textarea:focus {
      border-color: rgb(240, 97, 47)!important;
    }
    .search-btn {
      width: 100px;
      background: rgba(240, 97, 47, 1);
    }
    body {
      padding: 20px;
    }
    .high-light-text {
      color: rgba(240, 97, 47, 1);
    }
    .handle-btn {
      cursor: pointer;
    }
    /* --- common end --- */

    /* 弹窗样式 */
    
    #alert {
      padding: 10px 20px 30px;
    }
    #alert > * {
      margin: 7px 0;
    }
    #alert .title {
      font-size: 18px;
      font-weight: bold;
    }
    #alert img {
      width: 100%;
    }
    /* 弹窗样式 end */



    .page .layui-form-item .layui-inline {
      margin-right: 0;
    }
    .page .high-light-text {
      color: rgb(240, 97, 47);
    }
    .page .not-binding {
      cursor: pointer;
    }
    .page h4 {
      display: inline-block;
      font-weight: bold;
      font-size: 16px;
    }
    .page .table-meta {
      height: 40px;
      line-height: 40px;
      padding: 0 20px;
      border-bottom: 2px solid rgb(240, 97, 47);
      background-color: #fff;
    }
    .page .layui-table {
      margin-top: 0;
    }
    .page .layui-table th,
    .page .layui-table td {
      text-align: center;
    }
    .page .layui-table tr th:first-child,
    .page .layui-table tr td:first-child {
      text-align: left;
    }
    .page .table-meta-right {
      float: right;
    }

    .layui-form-label {
      width: 120px;
    }
    .layui-input-block {
      margin-left: 150px;
    }

    .page-btn {
      display: inline-block;
      color: rgb(240, 97, 47);
      border: 1px solid;
      width: 18px;
      height: 18px;
      line-height: 18px;
      text-align: center;
      border-radius: 50%;
      cursor: pointer;
      margin: 0 3px;
    }
  </style>
</head>

<body>
  <div class="page layui-row">
    <form class="layui-form" action="">
      <div class="layui-form-item layui-row">
        <div class="layui-form-item">
          <label class="layui-form-label">问题分类：</label>
          <div class="layui-inline layui-row">
            <div class="layui-inline layui-col-xs4 layui-col-sm4 layui-col-md4">
              <select name="问题分类">
                <option value="0">装修流程</option>
                <option value="1">家具产品</option>
                <option value="1">装修材料</option>
              </select>
            </div>
            <div class="layui-inline layui-col-xs4 layui-col-sm4 layui-col-md4">
              <select name="问题分类">
                <option value="0">装修流程</option>
                <option value="1">家具产品</option>
                <option value="1">装修材料</option>
              </select>
            </div>
            <div class="layui-inline layui-col-xs4 layui-col-sm4 layui-col-md4">
              <select name="问题分类">
                <option value="0">装修流程</option>
                <option value="1">家具产品</option>
                <option value="1">装修材料</option>
              </select>
            </div>
          </div>
        </div>
        <div class="layui-form-item layui-col-xs4 layui-col-sm4 layui-col-md4">
          <label class="layui-form-label">关键字：</label>
          <div class="layui-input-block">
            <input type="text" name="关键字：" lay-verify="symbol|length_4_20" placeholder="请输入关键字搜索" autocomplete="off" class="layui-input" />
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="search-btn layui-btn" lay-submit lay-filter="formSearch">
            查询
          </button>
        </div>
      </div>
    </form>
    <div class="table-meta">
      <h4 class="title">已回答</h4>
      <div class="table-meta-right layui-unselect">
        <span style="margin-right: 10px;">
          共有 <span class="number">2000</span> 条项目信息
        </span>
        <span>
          <span class="prev-btn page-btn" title="上一页">&lt;</span>
          <span class="page">
            <span class="curr-page" style="color: rgb(240, 97, 47);">1</span>
            / <span class="total-page">36</span>
          </span>
          <span class="next-btn page-btn" title="下一页">&gt;</span>
        </span>
      </div>
    </div>
    <table class="layui-table" lay-even>
      <thead>
        <tr>
          <th>日期</th>
          <th>问题</th>
          <th>分类</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>2018-10-10</th>
          <th>这样的问题怎么调整更合理？</th>
          <th>过道</th>
          <th class="high-light-text handle-btn answer-btn" data-id="123">查看</th>
        </tr>
      </tbody>
    </table>
  </div>

  <script src="../../lib/layui/layui.js"></script>
  <script src="../../scripts/custom-verify.js"></script>
  <script>
    //Demo
    layui.use(["form", "element", "jquery", "layer"], function () {
      var form = layui.form;
      var element = layui.element;
      var laydate = layui.laydate;
      var $ = layui.jquery;
      form.render();
      form.verify(getCustomVerifyObj());

      //监听表单信息提交
      form.on("submit(formSearch)", function (data) {
        console.log("表单数据如下：");
        console.log(data.field); //当前容器的全部表单字段，名值对形式：{name: value}
        layer.msg("打开开发者控制台查看表单数据");
        return false; // 阻止表单跳转
      });

      $('.answer-btn').on('click', function () {
        var id = $(this).attr('data-id');  // 通过问题id查询问题详情
        layer.open({
          title: '回答问题：',
          type: 1,
          area: ['600px', '400px'],
          content: '<div id="alert">\
            <div class="title">\
              <span>标题：</span>\
              <span>标题内容标题内容标题内容标题内容</span>\
            </div>\
            <div class="tags">\
              <span>标签：</span>\
              <span>理念、原则、风水</span>\
              </div>\
            <div class="desc">\
              <span>问题描述补充：</span>\
              <span>问题描述补充：xxxxxxxxxxxxxxxxxxx问题描述补充：</span>\
            </div>\
            <div class="pic">\
              <span>图片：</span>\
              <img src="https://tse4.mm.bing.net/th?id=OIP.jdSaesRclGCe9kD6Kn95ugHaE8&pid=Api&w=2400&h=1600&rs=1&p=0" alt="图片">\
            </div>\
            <div class="anwser title">\
              <span>回答问题</span>\
            </div>\
            <div class="desc">\
              <span>问题描述补充：</span>\
              <span>问题描述补xxxxx</span></div>\
          </div>',
        });
      })

    });
  </script>
</body>

</html>